<template>
  <div class="dashboard">
    <div class="header">
      <div class="card-info">
        卡号：{{ userInfo ? userInfo.cardno : '' }}
        <a class="logout" @click="handleLogout">退出登录</a>
      </div>
    </div>
    <div class="main-content">
      <div class="menu">
        <div class="menu-item" @click="$router.push('/balance')">查询余额</div>
        <div class="menu-item" @click="$router.push('/transfer')">转账</div>
        <div class="menu-item" @click="$router.push('/transactions')">查询交易记录</div>
        <div class="menu-item" @click="$router.push('/change-password')">修改密码</div>
      </div>
      <div class="content">
        <h1>欢迎使用个人网上银行</h1>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  },
  created() {
    if (!this.$store.state.isAuthenticated) {
      this.$router.push('/')
    }
  },
  methods: {
    async handleLogout() {
      try {
        // 调用后端退出接口
        this.$axios.post('/bank/logout');
        // 清除前端存储的用户信息和token
        this.$store.commit('clearUserInfo');
        // 跳转到登录页
        this.$router.push('/');
      } catch (error) {
        console.error('退出登录失败:', error);
        this.$message.error('退出登录失败，请重试');
      }
    }
  }
}
</script>

<style scoped>
.dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.card-info {
  text-align: right;
}

.logout {
  color: #666;
  margin-left: 20px;
  cursor: pointer;
  text-decoration: underline;
}

.main-content {
  flex: 1;
  display: flex;
}

.menu {
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #eee;
  padding: 20px 0;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #666;
}

.menu-item:hover {
  background-color: #f5f5f5;
  color: #409EFF;
}

.content {
  flex: 1;
  padding: 20px;
}

.content h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}
</style>